<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-button type="primary" @click="getRentingContractList">租房合同查询</el-button>
      <br>
      <el-form-item label="*承租房间">
        <el-input v-model="form.roomName" disabled />
      </el-form-item>
      <el-form-item label="*房产编码">
        <el-input v-model="form.houseId" disabled />
      </el-form-item>
      <el-form-item label="*租客姓名">
        <el-input v-model="form.tenantName" disabled />
      </el-form-item>
      <el-form-item label="*租客手机号">
        <el-input v-model="form.tenantPhone" disabled />
      </el-form-item>
      <el-form-item label="*租客身份证号">
        <el-input v-model="form.tenantCardNo" disabled />
      </el-form-item>
      <hr>
      <el-form-item label="*金融产品选择">
        <el-select v-model="form.jrProductId" @change="changeJrproduct" placeholder="请选择" clearable size="small">
          <el-option
            v-for="item in jrProducts"
            :key="item.jrProductName"
            :label="item.jrProductName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="*公寓承担" prop="businessRate">
        <el-input v-model="form.businessRate" @blur="andRate"/>%
      </el-form-item>
      <el-form-item label="*租客承担" prop="tenantRate">
        <el-input v-model="form.tenantRate" @blur="andRate"/>%
      </el-form-item>
      <el-form-item label="*年利率">
        <el-input v-model="form.rate" disabled />%
      </el-form-item>
      <el-form-item label="*借款金额">
        <el-input v-model="form.loanAmount" disabled/>
      </el-form-item>
      <el-form-item label="*年一次服务费率" prop="serviceFee">
        <el-input v-model="form.serviceFee" />%
      </el-form-item>
      <el-form-item label="*借款期限" prop="instalmentPeriod">
        <el-input v-model="form.monthLimit" placeholder="/月" />
      </el-form-item>
      <el-form-item label="授信额度">
        <el-input v-model="form.creditLine" disabled/>%
      </el-form-item>
      <el-button type="primary" @click="counter">金融计算器</el-button>
      <div v-if="open">
        <el-table :data="counterList">
          <el-table-column property="no" label="序号" width="150"></el-table-column>
          <el-table-column property="roomName" label="房产信息" width="150"></el-table-column>
          <el-table-column property="houseId" label="房源编号" width="150"></el-table-column>
          <el-table-column property="monthRent" label="应收月租金" width="150"></el-table-column>
          <el-table-column property="stageMonthRent" label="分期后月租金" width="150"></el-table-column>
          <el-table-column property="inInterest" label="分期利息" width="150"></el-table-column>
          <el-table-column label="借款期限" width="150">
            <template slot-scope="scope">
              {{scope.row.startDate}}-{{scope.row.endDate}}
            </template>
          </el-table-column>
        </el-table>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="应收租约合计(授信后)">
            <el-input v-model="form.reLeaseCount" disabled />
          </el-form-item>
          <el-form-item label="公寓分期利息合计">
            <el-input v-model="form.inInterestCount" disabled />
          </el-form-item>
          <el-form-item label="服务费">
            <el-input v-model="form.serCharge" disabled />
          </el-form-item>
          <el-form-item label="实收分期后租金合计">
            <el-input v-model="form.coHirerentCount" disabled />
          </el-form-item>
        </el-form>
      </div>

      <el-form-item label="备注:">
        <el-input v-model="form.remarks" placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          <el-button @click="cancel('form')">取 消</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="租房合同查询" :visible.sync="dialog" width="40%">
      <el-table :data="rentingContractList">
        <el-table-column property="tenantName" label="租客姓名" width="150"></el-table-column>
        <el-table-column property="roomName" label="房产信息" width="150"></el-table-column>
        <el-table-column property="houseId" label="房源编号" width="150"></el-table-column>
        <el-table-column property="signingDate" label="签约日期" width="150"></el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
            <el-button type="primary" @click="checking(scope.row.id)" size="mini">选中</el-button>
           </template>
         </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getRentingContractList"
      />
    </el-dialog>
  </div>
</template>

<script>
import {saveStageRenting,getJRAProductList,rentingContractList,getRentingContractById,getCounterList} from "@/api/financial/stageRenting";

export default {
  name: "stageRenting",
  components: {

  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 租房合同信息表格数据
      rentingContractList: [],
      //搜索参数
      queryParams:{
        pageNum: 1,
        pageSize: 10,
      },
      //添加表单
      form:{},
    //  金融产品
      jrProducts:[],
    //  校验
      rules:{

      },
    //  列表对话框标识
      dialog:false,
    //  仅通过计算器对话框标识
      dialog2:false,
    //  计算器显示
      open:false,
    //  计算器列表
      counterList:[],


    };
  },
  methods: {
    //合同弹框数据
    getRentingContractList() {
      this.dialog=true;
      rentingContractList(this.queryParams).then(response => {
        this.rentingContractList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //金融产品
    getJRProductList(jrproductType){
      getJRAProductList(jrproductType).then(response => {
        this.jrProducts = response.data;
      });
    },
    changeJrproduct() {
      for (const item of this.jrProducts) {
        if(item.id==this.form.jrProductId){
          this.form.creditLine=item.creditLine;
          this.form.monthLimit=item.instalmentPeriod;
        }
      }
    },
    //取消，重置
    cancel(formName) {
      this.$refs[formName].resetFields();
    },
  //  提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          saveStageRenting(this.form).then(response => {
            if(response.code==200){
              this.msgSuccess("新增成功");
              location.reload();
            }
          });
        } else {
          console.log("申请失败");
        }
      });
    },
  //  选中
    checking(id) {
      getRentingContractById(id).then(response =>{
        this.form=response.data.data;
        this.form.loanAmount=response.data.loanAmount;
        this.dialog=false;
      })
    },
  //  利率
    andRate() {
      console.log("form",this.form);
      let businessRate = this.form.businessRate;
      let tenantRate = this.form.tenantRate;
      console.log("businessRate",businessRate);
      console.log("tenantRate",tenantRate);
      let sum = 0;
      if(businessRate!=undefined && tenantRate!=undefined){
        sum = Number(businessRate)+Number(tenantRate);
      }
      if(businessRate!=undefined && tenantRate==undefined){
        sum = Number(businessRate)+Number(0);
      }
      if(businessRate==undefined && tenantRate!=undefined){
        sum = Number(0)+Number(tenantRate);
      }
      this.form.rate=sum;
      console.log("this.form.rate",this.form.rate);
    },
  //  计算器
    counter() {
      getCounterList(this.form).then(response=>{
        this.counterList=response.data.counterList;
        console.log("counterList",this.counterList);
        this.form.reLeaseCount=response.data.counterVo.reLeaseCount;
        this.form.inInterestCount=response.data.counterVo.inInterestCount;
        this.form.serCharge=response.data.counterVo.serCharge;
        this.form.coHirerentCount=response.data.counterVo.coHirerentCount;
        this.open=true;
      })
    }
  },
  created() {
    this.getJRProductList(1);
  },
};
</script>
